<template>
	<view class="boxSty">
		<view class="content-info">
			<!-- <div class="bg-primary w-200 h-80 center text-white rounded-50 font-bold">
					{{$t('例子')}}
				</div> -->
			<div class="between w-full fz24">
				<p class="info-title text-555">{{$t('当前用时')}}：{{ allInfo.create_at || '' }}</p>
				<p class="info-content text-111">{{ allInfo.goods_type == 0 ? $t('大件') : $t('小件') }}</p>
			</div>
			<view class="lineSty">

				<div class="info flex-col rounded-20 p-20" style="background: #f7f7f7;word-break: break-word;">
					<p class="fz24 font-bold">{{$t('详细出发地')}}</p>
					<div class="mt-16 fz25 text-gray-3d3d3d">
						{{ get(allInfo, "departure.content") }}
					</div>
				</div>

				<div class="info flex-col rounded-20 p-20" style="background: #f7f7f7;word-break: break-word;">
					<p class="fz24 font-bold">{{$t('详细目的地')}}</p>
					<div class="mt-16 fz25 text-gray-3d3d3d">
						{{ get(allInfo, "reach.content") }}
					</div>
				</div>

				<div class="info">
					<p class="info-title">{{$t('货物信息')}}</p>
					<p class="info-content">{{ [get(allInfo, "goods_info.title"), get(allInfo,
						"goods_info.goods_weight") + "吨", get(allInfo, "goods_info.goods_volume") + '立方米', get(allInfo,
							"goods_info.package.title")].filter(item => item).join('/') || '' }}</p>
				</div>
				<div class="info2">
					<p class="info-title">{{$t('业务需求')}}</p>
					<p>
						<!-- <BusiRequire :requireInfo = "allInfo.demand" /> -->
						<BusiRequire v-if="allInfo.goods_type == 0" :requireInfo="allInfo.demand" />
						<BusiRequire v-else requireInfo="1,2,3,4,5,6" />
					</p>
				</div>
				<div class="info2">
					<p class="info-title">{{$t('运输方式')}}</p>
					<p class="info-content">{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value
						|| '' }} - {{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }} - {{ get(allInfo,
							"vehicle_info.title")
							|| '' }}</p>
				</div>
				<div class="info2 mb-35">
					<p class="info-title">{{$t('货主出价')}}</p>
					<p class="info-moeny">{{ allInfo.price_unit }}{{ allInfo.price || '' }}</p>
				</div>
			</view>
			<div class="fz24 font-bold center text-555 mt-34" @click="goDetail">
				{{$t('查看货源详情')}}
			</div>
		</view>
	</view>
</template>

<script>
import BusiRequire from './busiRequire.vue'
export default {
	components: {
		BusiRequire
	},
	props: ["allInfo"],
	data() {
		return {

			transportList: [
				{
					key: '0',
					value: this.$t('不限')
				},
				{
					key: '1',
					value: '其他 '
				},
				{
					key: '2',
					value: this.$t('汽运')
				},
				{
					key: '3',
					value: this.$t('空运')
				},
				{
					key: '4',
					value: this.$t('海运')
				},
				{
					key: '5',
					value: this.$t('铁路')
				},
			],
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
		}
	},
	methods: {
		goDetail() {
			uni.navigateTo({
				url: '/pages/shipmentRecord/sourceDeatil?item=' + JSON.stringify(this.allInfo)
			})
		}
	}
}
</script>

<style lang="less">
.boxSty {
	border-radius: 26rpx;
	background: #FFF;
	width: 95%;
	padding: 30rpx 24rpx;
	margin: 16rpx auto;
}

.lineSty {
	width: 100%;
	border-bottom: 1rpx solid #F0F0F0;
	border-top: 1rpx solid #F0F0F0;
	margin-top: 30rpx;
}

.content-info {
	padding-left: 0;
	margin-top: 15rpx;
	margin: 15rpx auto;

	.info2 {
		margin-top: 42rpx;
		display: flex;
		justify-content: space-between;

		.logo {
			width: 44rpx;
			height: 44rpx;
			margin-left: 20rpx;
			margin-top: 0;
			vertical-align: middle;
		}

		.info-title {
			color: #535353;
			font-size: 28rpx;
			font-weight: 400;
		}

		.info-content {
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
		}

		.info-moeny {
			color: #F53F3F;
			font-weight: 600;
			font-size: 28rpx;
		}
	}

	.info {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;

		.logo {
			width: 44rpx;
			height: 44rpx;
			margin-left: 20rpx;
			margin-top: 0;
			vertical-align: middle;
		}

		.info-title {
			color: #535353;
			font-size: 28rpx;
			font-weight: 400;
		}

		.info-content {
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
		}

		.info-moeny {
			color: #F53F3F;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
}
</style>
